今日要與各位介紹對於前端非常實用的套件：Bootstrap

Bootstrap

那首先，我們需要先了解「Bootstrap」是什麼？
Bootstrap 是由 Twitter 公司所推出的前端框架，蒐集了大量使用者的資料，不論是特效或是使用者介面，都非常符合大眾的使用習慣，而 Bootstrap 也整合了網頁常用的元素，例如：圖像輪播、導覽列、下拉選單、滾動式頁籤、網格系統、表單等功能。而 Bootstrap 最厲害的是，我們可以不需要撰寫任何的 CSS 與 Javascript，就可以透過 HTML 的標籤去製作出各式各樣的網頁特效與 RWD 響應式網頁。

也提供給各位 Bootstrap v5.0 的官方網站：

• 中文版 ---> Bootstrap v5.0 中文網站
• 英文版 ---> Bootstrap v5.0 英文網站

Bootstrap-Vue

那接下來就要進入我們的重點，Vue + Bootstrap
首先需要執行我們的 Vue Cli：
(如已有安裝 Vue Cli 則不需要執行此步驟)

npm i -g vue-cli

接者安裝 bootstrap-vue 及 webpack：

vue init bootstrap-vue/webpack-simple my-web

在安裝的過程中，系統也會詢問許多問題，讓我們來看看吧：

• ? Project name my-web (請問網站名稱為什麼呢？)
• ? Project description (請描述此項目專案？)
• ? Author (請問作者為何人？)
• ? Use sass? (請問是否使用 sass 呢？)

接者我們就可以進入剛才創建好的資料夾了：

cd [資料夾名稱]

接者安裝 npm 的套件：

npm i

最後就可以開啟我們的網站了：

npm run serve

接著就可以到官方網站挑選需要的元件放入我們的 Vue 中了
bootstrap-vue 官方網站
大家可以實際操作試試看喔！

那我們今天對於 Vue-bootstrap 的介紹就到這裡告一段落了
謝謝大家的觀看 ~ 明天見